<template>
	<view class="page">
			<view class="header">
				<image class="aaa" @click="back" src="/static/image/login/left.png" mode=""></image>
				<text class="bbb">闹铃</text>
				<view class="tixing">
					<text class="left">提前提醒时间</text>
					<div class="right">
						<!-- <text>5min</text> -->
						
						<input v-model="remindValue" type="text" @input="remindChange" inputmode="decimal" />
						<text>min</text>
						<image src="/static/image/publish/right.png" mode=""></image>
					</div>
				</view>
			</view>
			<view style="height: 276rpx;">
			</view>
			<scroll-view scroll-y >
				<div class="content">
					<view class="item" v-for="(item, index) in planList" :key="index">
						<div class="top">
							<text class="left">{{item.title}}</text>
							<div class="right">
								<text>全部</text>
								<image src="/static/image/mine/switchopen.png" mode=""></image>
								<!-- <image src="/static/image/mine/switchclose.png" mode=""></image> -->
							</div>
						</div>
						<div class="middle">
							<text>地点：{{item.address}}个</text>
							<text>步行：{{item.stepTime}}</text>
							<text>车程：{{item.carTime}}</text>
						</div>
						<div class="bottom">
							<div class="line"></div>
							<div class="son" v-for="(itm, ind) in item.list" :key="ind">
								<text class="circle"></text>
								<text class="title">{{itm.subtitle}}</text>
								<div class="right" v-if="itm.clockTime">
									<text>{{itm.clockTime}}</text>
									<image class="edit" src="/static/image/publish/edit.png" mode=""></image>
									<image class="switch" src="/static/image/mine/switchopen.png" mode=""></image>
									<!-- <image class="switch" src="/static/image/mine/switchclose.png" mode=""></image> -->
								</div>
								<div v-else class="right">
									<image class="clock" src="/static/image/publish/clockactive.png" mode=""></image>
								</div>
							</div>
						</div>
					</view>
				</div>
			</scroll-view>
			<view class="" style="height: 190rpx;">
			</view>
			<tabbar selected="4"></tabbar>
	</view>
</template>

<script>
	import tabbar from "../../components/tabbar/tabbar.vue";
	export default {
		components: {
			tabbar: tabbar,
		},
		data() {
			return {
				planList: [
					{
						title: '深圳-福州-3日【第一天】',
						address: 7,
						stepTime: '2h35min',
						carTime: '1h50min',
						list: [
							{
								subtitle: '09:00 ～ 11:00 福建博物馆',
								clockTime: '11:20',
							},
							{
								subtitle: '11:30 ～ 12:00 冰心故居',
								clockTime: '11:20',
							},
							{
								subtitle: '12:00 ～ 13:00 水榭戏台',
								clockTime: '',
							},
						]
					},
					{
						title: '深圳-福州-3日【第二天】',
						address: 7,
						stepTime: '2h35min',
						carTime: '1h50min',
						list: [
							{
								subtitle: '09:00 ～ 11:00 福建博物馆',
								clockTime: '11:20',
							},
							{
								subtitle: '11:30 ～ 12:00 冰心故居',
								clockTime: '11:20',
							},
							{
								subtitle: '12:00 ～ 13:00 水榭戏台',
								clockTime: '',
							},
						]
					},
					{
						title: '深圳-福州-3日【第三天】',
						address: 7,
						stepTime: '2h35min',
						carTime: '1h50min',
						list: [
							{
								subtitle: '09:00 ～ 11:00 福建博物馆',
								clockTime: '11:20',
							},
							{
								subtitle: '11:30 ～ 12:00 冰心故居',
								clockTime: '11:20',
							},
							{
								subtitle: '12:00 ～ 13:00 水榭戏台',
								clockTime: '',
							},
						]
					},
				],
				remindValue: 5,
				
			}
		},
		methods: {
			remindChange(event) {
				this.remindValue = event.taget.value
			},
			back() {
				uni.navigateBack()
			},
		}
	}
</script>

<style lang="less">
.page {
	background: #EEF0F4;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	.header {
		height: 276rpx;
		padding-bottom: 100rpx;
		box-sizing: border-box;
		background-color: #fff;
		// padding-top: 108rpx;
		display: flex;
		justify-content: center;
		// align-items: center;
		position: fixed;
		width: 100%;
		z-index: 1;
		.aaa {
			position: absolute;
			left: 32rpx;
			bottom: 122rpx;
			width: 34rpx;
			height: 34rpx;
		}
		.bbb {
			position: absolute;
			top: 108rpx;
			font-weight: 600;
			font-size: 34rpx;
			color: #221715;
			line-height: 51rpx;
		}
		
		.tixing {
			width: 100vw;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;
			position: absolute;
			bottom: 0;
			height: 100rpx;
			.left {
				font-weight: 400;
				font-size: 28rpx;
				color: #1A1A1A;
				line-height: 40rpx;
				flex: 1;
			}
			.right {
				display: flex;
				align-items: center;
				input {
					width: 20rpx;
					font-size: 28rpx;
				}
				text {
					font-weight: 400;
					font-size: 28rpx;
					color: #1A1A1A;
					line-height: 40rpx;
				}
				image {
					margin-left: 10rpx;
					width: 20rpx;
					height: 20rpx;
				}
			}
		}
	}
	.content {
		flex: 1;
		margin: 20rpx;
		box-sizing: border-box;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		.item {
			background: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;
				.left {
					font-weight: bold;
					font-size: 34rpx;
					color: #221715;
					line-height: 48rpx;
				}
				.right {
					display: flex;
					align-items: center;
					text {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						line-height: 34rpx;
						margin-right: 10rpx;
					}
					image {
						width: 76rpx;
						height: 40rpx;
					}
				}
			}
			.middle {
				height: 74rpx;
				background: linear-gradient( 270deg, #0187F5 0%, #2DCCC2 100%);
				border-radius: 16rpx 16rpx 0 0;
				display: flex;
				align-items: center;
				padding: 20rpx;
				box-sizing: border-box;
				text {
					font-weight: bold;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 34rpx;
					margin-right: 32rpx;
				}
			}
			.bottom {
				background: #F5F7F9;
				border-radius: 0rpx 0rpx 16rpx 16rpx;
				position: relative;
				padding: 40rpx 15rpx 30rpx 15rpx;
				box-sizing: border-box;
				.line {
					position: absolute;
					top: 50rpx;
					left: 25rpx;
					// z-index: -1;
					height: 60%;
					border-left: 2rpx dashed #D9DFE6;
				}
				.son {
					position: relative;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 40rpx;
					.circle {
						width: 18rpx;
						height: 18rpx;
						background: #FFFFFF;
						border: 2rpx solid #1076F2;
						margin-right: 20rpx;
						border-radius: 50%;
					}
					.title {
						flex: 1;
						font-weight: 400;
						font-size: 26rpx;
						color: #1A1A1A;
						line-height: 40rpx;
					}
					.right {
						
						box-sizing: border-box;
						// padding-left: 5rpx;
						display: flex;
						align-items: center;
						justify-content: end;
						text {
							font-weight: 400;
							font-size: 28rpx;
							color: #1A1A1A;
							line-height: 40rpx;
						}
						.edit {
							margin: 0 32rpx 0 20rpx;
							width: 32rpx;
							height: 32rpx;
						}
						.switch {
							width: 76rpx;
							height: 40rpx;
						}
						.clock {
							width: 36rpx;
							height: 32rpx;
							margin-right: 20rpx;
						}
					}
				}
			}
		}
	}
}
</style>
